/**
 *  父子通信小案例
 * 
 */

import React from "react"

function ListItem (props) {
  console.log(props, 'prop')
  const { name, price, info, id, } = props.listItem
  return (
    <div>
      <h3>{name}</h3>
      <p>{price}</p>
      <p>{info}</p>
      <button onClick={() => props.delClick(id)}>删除</button>
    </div>
  )
}


class App extends React.Component {
  state = {
    list: [
      { id: 1, name: '超级好吃的棒棒糖', price: 18.8, info: '开业大酬宾，全场8折' },
      { id: 2, name: '超级好吃的大鸡腿', price: 34.2, info: '开业大酬宾，全场8折' },
      { id: 3, name: '超级无敌的冰激凌', price: 14.2, info: '开业大酬宾，全场8折' }
    ]
  }
  // id是子组件传递过来的
  delClick = (id) => {
    this.setState({
      list: this.state.list.filter(item => item.id !== id)
    })
  }
  render () {
    return (
      <>
        {this.state.list.map(item =>
          <ListItem
            key={item.id}
            listItem={item}
            delClick={this.delClick}
          >

          </ListItem>)}
      </>



    )
  }
}
export default App
